<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>user用户列表界面</title>
    <link rel="stylesheet" href="css/element.css">
    <script src="js/bootstrap.min.js"></script>
    <script src="js/vue.min.js"></script>
    <script src="js/element.js"></script>
    <script src="js/echarts.min.js"></script>
    <style>
        #box{
            margin-left: 15px;
        }

    </style>
</head>
<body>
<div id="box">
    <h1>用户列表</h1>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="用户名">
            <el-input v-model="formInline.user" placeholder="请输入用户名"></el-input>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
    </el-form>
    <template>
        <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
            <el-table-column prop="id" label="ID" width="180"></el-table-column>

            <el-table-column prop="username" label="用户名" width="180"></el-table-column>

            <el-table-column prop="name" label="姓名"></el-table-column>

            <el-table-column prop="six" label="性别"></el-table-column>

            <el-table-column prop="age" label="年龄"></el-table-column>

            <el-table-column prop="Introduce_briefly" label="简介"></el-table-column>

            <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">

                    <el-button  type="text" size="small">
                            <el-link type="primary" href="user_detail.html" target="content">详细信息</el-link>
                    </el-button>

                </template>
            </el-table-column>

            <el-table-column fixed="right" label="加关注" width="100">
                <!-- 将复选框移到作用域插槽内，并绑定到每行的followed属性 -->
                <template slot-scope="scope">
                    <el-checkbox v-model="scope.row.followed"></el-checkbox>
                </template>
            </el-table-column>
        </el-table>
    </template>

<!--    分页码-->
    <div class="block" style="text-align: center;margin-top: 20px;">
        <el-pagination
                layout="prev, pager, next"
                :total="50">
        </el-pagination>
    </div>

</div>
</body>
<script>
    new Vue({
        el: "#box",
        data: {
            // 移除共用的checked状态
            tableData: [{
                id: '1',
                username: "xiaohong",
                name: '小红',
                six: '女',
                age: '18',
                Introduce_briefly: '我很美',
                // 为每个用户添加独立的关注状态
                followed: false
            },
            {
                id: '2',
                username: "xiaohu",
                name: '小虎',
                six: '男',
                age: '25',
                Introduce_briefly: '我很强壮',
                followed: false
             },
             {
                 id: '3',
                 username: "xiaolan",
                 name: '小蓝',
                 six: '女',
                 age: '22',
                 Introduce_briefly: '我很美',
                 // 为每个用户添加独立的关注状态
                 followed: false
                },
                {
                    id: '4',
                    username: "xiaozhang",
                    name: '小张',
                    six: '男',
                    age: '28',
                    Introduce_briefly: '我很帅',
                    // 为每个用户添加独立的关注状态
                    followed: false
                },
                {
                    id: '5',
                    username: "xiaohu",
                    name: '小胡',
                    six: '男',
                    age: '22',
                    Introduce_briefly: '我很丑',
                    // 为每个用户添加独立的关注状态
                    followed: false
                },
                {
                    id: '6',
                    username: "xiaocheng",
                    name: '小程',
                    six: '男',
                    age: '23',
                    Introduce_briefly: '我最帅',
                    // 为每个用户添加独立的关注状态
                    followed: false
                },
                {
                    id: '7',
                    username: "xiaoxiang",
                    name: '小向',
                    six: '男',
                    age: '20',
                    Introduce_briefly: '我能吃',
                    // 为每个用户添加独立的关注状态
                    followed: false
                },

                ],
            formInline: {
                user: '',
                region: ''
            }
        },
        methods: {
            //查看详情
            handleClick() {
                console.log();
                document.location.href = "uesr_look.html";
                document.location.target = "content";
            },

            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            // 表单
            onSubmit() {
                // 刷新页面
                location.reload();
            }
        }
    })
</script>
</html>